<template>
  <div class="chart">
    <div class="time">
      <el-date-picker v-model="startDate" placeholder="开始日期" type="date" :picker-options="options1"></el-date-picker>
      <div
        class="time-line"
        style="width:10px;border-top:solid #948f8f 2px;height: 1px;margin-top: 15px;margin-left:4px;margin-right:4px"
      ></div>
      <el-date-picker v-model="endDate" placeholder="结束日期" type="date" :picker-options="options2"></el-date-picker>
      <el-button
        class="filter-item"
        style="margin-left: 10px;"
        type="primary"
        v-waves
        icon="el-icon-search"
        @click="onChangeDate"
      >确认</el-button>
    </div>
    <div class="user-table-container">
      <div class="user-table-header">
        <div class="user-table-item">
          <div class="circle-alipay"></div>
          <span>支付宝新增用户</span>
        </div>
        <div class="user-table-item">
          <div class="circle-wechat"></div>
          <span>微信新增用户</span>
        </div>
        <div class="user-table-item">
          <div class="circle-total"></div>
          <span>总体新增用户</span>
        </div>
        <div class="user-table-header-usersum">累计注册用户数（人）：{{userCount.userTotal}}</div>
      </div>
      <hr style="width:100%;" />
      <div class="inner" ref="chart"></div>
    </div>
  </div>
</template>

<script>
import dayjs from 'dayjs'
// 引入基本模板
const echarts = require('echarts/lib/echarts')
// 引入柱状图组件
require('echarts/lib/chart/line')
// 引入提示框和title组件
require('echarts/lib/component/tooltip')
require('echarts/lib/component/legend')
export default {
  props: {
    userCount: Object
  },
  data () {
    return {
      chart: undefined,
      xData: undefined,
      y1Data: undefined,
      y2Data: undefined,
      y3Data: undefined,
      startDate: new Date(new Date().getTime() - 6 * 24 * 60 * 60 * 1000),
      endDate: new Date()
    }
  },
  watch: {
    userCount () {
      this.getData()
    }
  },
  computed: {
    options1 () {
      const endDate = this.endDate
      return {
        disabledDate (time) {
          if (time != null && endDate != null) {
            return time.getTime() > endDate.getTime()
          }
        }
      }
    },
    options2 () {
      const startDate = this.startDate
      return {
        disabledDate (time) {
          if (time != null && startDate != null) {
            return time.getTime() < startDate.getTime()
          }
        }
      }
    }
  },
  mounted () {
    /**
     * 页面挂载后加载数据
     */
    this.getData()
  },
  methods: {
    _dateToStr (d) {
      if (d != null) {
        return `${d.getFullYear()}-${d.getMonth() + 1}-${d.getDate()}`
      } else {
        const dd = new Date()
        return `${dd.getFullYear()}-${dd.getMonth() + 1}-${dd.getDate()}`
      }
    },
    _dateToDayStr (d) {
      if (d != null) {
        return `${d.getMonth() + 1}-${d.getDate()}`
      }
    },
    errorClick () {
      this.$message({
        showClose: true,
        message: '日期不能为空',
        type: 'error'
      })
    },
    onChangeDate () {
      if (this.startDate == null || this.endDate == null) {
        this.errorClick()
        return
      }
      const startDateStr = this._dateToStr(this.startDate) + ' 00:00:00'
      const endDateStr = this._dateToStr(this.endDate) + ' 23:59:59'
      this.$emit('changeDate', { startDateStr, endDateStr })
    },
    getData () {
      if (this.startDate == null || this.endDate == null) {
        this.errorClick()
        return
      }
      if (this.chart && this.endDate != null) {
        this.chart.showLoading()
      }
      this.xData = []
      this.y1Data = []
      this.y2Data = []
      this.y3Data = []

      const datas = this.userCount.datas
      for (let i = 0; i < datas.length; i++) {
        this.xData.push(dayjs(datas[i].time).format('MM-DD'))
        this.y1Data.push(datas[i].aliPayIncrease)
        this.y2Data.push(datas[i].wechatIncrease)
        this.y3Data.push(datas[i].totalIncrease)
      }
      this.paint()
    },
    paint () {
      if (!this.chart) {
        // 基于准备好的dom，初始化echarts实例
        const chart = this.$refs.chart
        this.chart = echarts.init(chart)
      } else {
        this.chart.clear()
        this.chart.hideLoading()
      }
      this.option = {
        grid: {
          left: 20,
          right: 20,
          top: 10,
          bottom: 20
        },
        tooltip: {
          trigger: 'axis',
          padding: [8, 12]
        },
        xAxis: {
          type: 'category',
          data: this.xData,
          axisTick: {
            show: false,
            length: 4,
            lineStyle: {
              color: '#fff',
              type: 'solid',
              width: 1
            }
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: '#000'
            },
            fontSize: 8
          },
          splitLine: {
            show: false,
            lineStyle: {
              type: 'dashed',
              color: '#292c38'
            }
          },
          axisLine: {
            show: true,
            lineStyle: {
              type: 'solid',
              color: '#292c38'
            }
          }
        },
        yAxis: {
          axisLine: {
            show: false,
            lineStyle: {
              type: 'solid',
              color: '#fff'
            }
          },
          splitLine: {
            show: true,
            lineStyle: {
              type: 'dashed',
              color: '#292c38'
            }
          },
          axisTick: {
            show: false,
            length: 4,
            lineStyle: {
              color: '#fff',
              type: 'solid',
              width: 1
            }
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: '#000'
            },
            fontSize: 8
          },
          minInterval: 1,
          min: 0
        },
        series: [
          {
            name: '支付宝新增用户',
            type: 'line',
            data: this.y1Data.map(x => x),
            itemStyle: {
              normal: {
                color: '#0000FF'
              }
            }
          },
          {
            name: '微信新增用户',
            type: 'line',
            data: this.y2Data.map(x => x),
            itemStyle: {
              normal: {
                color: '#00FF00'
              }
            }
          },
          {
            name: '总体新增用户',
            type: 'line',
            data: this.y3Data.map(x => x),
            itemStyle: {
              normal: {
                color: '#FFFF00'
              }
            }
          }
        ]
      }
      // 绘制图表
      this.chart.setOption(this.option)
      window.addEventListener('resize', () => {
        this.chart.resize()
      })
    }
  }
}
</script>

<style scoped>
.chart {
  width: 100%;
  height: 100%;
}

.time {
  height: 10%;
  margin-left: 1%;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
}
.user-table-container {
  /* background-color: rgb(248, 248, 248); */
  margin-left: 1%;
  margin-right: 1%;
}
.user-table-header {
  margin-top: 2%;
  font-size: 12px;
  display: flex;
  flex-direction: row;
}
.user-table-item {
  padding: 10px;
  display: flex
}
.user-table-header-usersum {
  margin-left: auto;
  margin-top: 10px;
  margin-right: 10px;
  font-size: 12px;
}
.inner {
  height: 400px;
  width: 100%;
  margin-left: 1%;
}
.circle-total {
  width: 8px;
  height: 8px;
  border: 1px solid #FFFF00;
  background-color: #FFFF00;
  border-radius: 8px;
  opacity: 0.5;
  margin-right: 5px;
  margin-top: 2px;
}
.circle-wechat {
  width: 8px;
  height: 8px;
  border: 1px solid #00FF00;
  background-color: #00FF00;
  border-radius: 8px;
  opacity: 0.5;
  margin-right: 5px;
  margin-top: 2px;
}
.circle-alipay {
  width: 8px;
  height: 8px;
  border: 1px solid #0000FF;
  background-color: #0000FF;
  border-radius: 8px;
  opacity: 0.5;
  margin-right: 5px;
  margin-top: 2px;
}
</style>
